<template>
  <view class="application-wrap">
    <view class="activeApp">
      <text class="title">当前首页应用</text>
      <draggable :list="applyList"  filter=".disabled" v-if="edit">
        <transition-group tag="view"  class="container" style="display: block;">
          <view class="item" v-for="(item,index) in applyList" :key="item.id" draggable="true" >
            <view class="itemImgView">
              <image :src="item.icon" class="itemImg" @click="gotoApp(item.url)"/>
            </view>
            <view class="itemTxt">{{item.name}}</view>
            <image src="../../static/image/cancel.png" class="closeImg" @click.stop="deleteItem(index)"/>
          </view>
          <view class="item disabled" key="show">
            <view class="">赋能展现</view>
            <view>图标最多9个</view>
          </view>
        </transition-group>
      </draggable>
      <view v-else class="container">
        <view class="item" v-for="(item,index) in applyList" :key="index">
          <view class="">
            <image :src="item.icon" class="itemImg" @click="gotoApp(item.url)"/>
          </view>
          <view class="itemTxt">{{item.name}}</view>
        </view>
        <view class="item disabled" key="show">
          <view class="">赋能展现</view>
          <view>图标最多10个</view>
        </view>
      </view>
      <view class="surebtn" @click="adduserApp">{{edit?'确定':'编辑'}}</view>
    </view>
    <view class="storeMag">
      <p class="title">更多应用</p>
      <view v-for="(apps,key,index) in sysApp" :key="index" v-if="apps.length > 0">
        <view class="sTitle">{{key}}</view>
        <view class="container">
          <view class="item" v-for="(item,index1) in apps" :key="index1" >
            <image :src="item.icon" class="itemImg" @click="gotoApp(item.url)"/>
            <!-- @click="gotoApp(item.url)" -->
            <view class="itemTxt">{{item.name}}</view>
            <image src="../../static/image/addIcon.png" class="closeImg" @click="plusItem(item, key,index1)" v-if="edit"/>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>
<script>
import draggable from 'vuedraggable';
import { finduserApps,addUserApps } from "../../service/workbench/workbench.service.js"
export default {
  components: { draggable },
  data () {
    return {
      applyList: [],
      sysApp: [],
      edit:false,
    }
  },
  mounted() {
    this.finduserApp();
  },
  methods: {
    finduserApp () {
      finduserApps({},(res => {
        if(res.status == 0) {
          this.applyList = res.data.defaultApps;
          this.sysApp = res.data.systemApps;
        }
      }))
    },
    gotoApp (url) {//路由链接
    console.log(url)
      if(url == '/privateFlow/index') {
        PersonalCenter({},res => {
          if(res.status == 0) {
            if (res.data.isHaveStore == 1) {
              uni.navigateTo({
                url: '/pages/privateFlow/index'
              });
            }else {
              uni.showToast({
                title: res.msg,
                icon: 'none'
              });
            }
          } else {
            uni.showToast({
              title: res.msg,
              icon: 'none'
            });
          }
        })
      };
      uni.navigateTo({
        url: url
      });
    },
    deleteItem (index) {//取消-关闭
      let groupName = this.applyList[index].groupName;
      if (!this.sysApp[groupName]) {
        let list = [];
        list.push(this.applyList[index]);
        this.$set(this.sysApp, groupName, list);
      } else {
        this.sysApp[groupName].push(this.applyList[index]);
      }
      this.applyList.splice(index, 1);
    },
    adduserApp () {
      if (!this.edit) {
        this.edit = true;
        return;
      }
      let ids = this.applyList && this.applyList.length > 0 ? this.applyList.map(item => item.id).join(',') : '';
      addUserApps({id: ids},(res => {
        if (res.status == 0) {
          uni.showToast({
            title: '保存成功',
            duration: 2000
          });
          setTimeout(function() { //回调方法执行过快，uni.showToast不显示 可以加延时器解决
            uni.navigateBack({delta:2})
          }, 2000)
        } else {
          uni.showToast({
            title: res.msg,
            icon: 'none'
          })
        }
      }))
    },
    plusItem (item, key, index) {
      if (this.applyList.length >= 9) {
        uni.showToast({
          title: '最多添加9个',
          duration: 2000,
          icon:'none'
        });
        return
      }
      this.sysApp[key].splice(index, 1)
      this.applyList.push(item)
    },
  }
}
</script>
<style lang="scss" scoped>
  .application-wrap{
    text-align: center;
    .activeApp{
      background: #fff;
      overflow: hidden
    }
    .title{
      font-size: 30rpx;
      line-height: 80rpx
    }
    .container{
      margin: 0 auto;
      border-top:1rpx solid #e1e1e1;
      overflow: hidden;
      .item{
        position:relative;
        width: 187rpx;
        height: 187rpx;
        border-right:1rpx solid #e1e1e1;
        border-bottom:1rpx solid #e1e1e1;
        float: left;
        box-sizing: border-box;
        transition: all linear .3s;
      }
      .closeImg{
        position: absolute;
        width: 40rpx;height: 40rpx;
        top:10rpx;right: 10px;
      }
      .item:nth-child(4n){
        border-right:none
      }
      .itemImgView {
        
      }
      .itemImg{
        width: 60rpx;
        height: 60rpx;
        margin-top: 44rpx;
        
      }
      .itemTxt {
        font-size: 24rpx;
      }
      .disabled{
        font-size: 22rpx;
        color: #999;
        padding-top: 70rpx;
      }
    }
    .surebtn{
      background: #FF6A69;
      font-size: 24rpx;
      text-align: center;
      line-height: 50rpx;
      border-radius: 10rpx;
      margin: 50rpx auto 20rpx auto;
      height: 50rpx;width: 189rpx;
      color: #fff;
    }
    .storeMag{
      background: #fff;
      margin-top: 20rpx;
      overflow: hidden;
      .sTitle{
        height: 28rpx;
        margin: 30rpx 0 37rpx 30rpx;
        border-left: 1rpx solid #333;
        font-size: 28rpx;
        line-height: 30rpx;text-align: left;
        text-indent: 20rpx;
      }
    }
  }
</style>
